/**
* @Author: 858834013@qq.com
* @Name: pageItem
* @Date: 2023年07月16日14:11:34
* @Desc: vue3 数据可视化大屏蓝色边框
*/
<template>
  <div class="pageItemBody">
    <div class="pageItemBodyInner" ref="inner" v-if="show">
      <div class="title">
        <titleInfo :name="name"></titleInfo>
      </div>
      <div class="itemMain">
        <slot></slot>
      </div>
    </div>
    <!--    向下展开的背景-->
    <div class="bg" ref="bg" v-if="!show"></div>
  </div>
</template>

<script>

import titleInfo from './titleInfo.vue'
import {gsap} from "gsap";

export default {
  name: "title",
  data() {
    return {
      show: false
    }
  },
  components: {titleInfo},
  props: {
    name: {
      type: String,
      default() {
        return '';
      }
    },
    delay: {
      type: Number,
      default() {
        return 0;
      }
    },
    duration: {
      type: Number,
      default() {
        return 0.5;
      }
    },
  },
  mounted() {
    var that = this;
    gsap.to(this.$refs.bg, {
      height: '100%',
      delay: that.delay,
      duration: that.duration, // 动画持续时间（以秒为单位）
      ease: 'none', // 使用线性动画缓动函数
      onComplete: () => {
        // 动画完成后触发的回调函数
        console.log('动画执行完成');
        setTimeout(() => {
          that.show = true

          // 添加新的 GSAP 动画来改变透明度
          that.$nextTick(() => {
            gsap.to(that.$refs.inner, {
              opacity: 1,
              duration: 1, // 这里可以设置渐显动画的持续时间
            });
            that.animate()
          })
        }, 100)
      },
    });
  },
  methods: {
    animate() {
      const titleIcon = this.$refs.titleIconRef;
      // 图标从小到大的动画
      gsap.from(titleIcon, {scale: 0, delay: 0.5, duration: 1});
    }
  },
}
</script>

<style lang="less" scoped>
.pageItemBody {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  z-index: 1;
  align-content: flex-start;

  .title {
    height: 66px;
    width: calc(105% - 0px);
    display: flex;
    margin-left: -2%;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    position: relative;
    z-index: 10;
  }

  .bg {
    height: 0%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(#00699b, 0.3), #00699b);
  }
}

.pageItemBodyInner {
  width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  z-index: 1;
  align-content: flex-start;
  opacity: 0;


}


.itemMain {
  position: relative;
  width: 100%;
  height: calc(100% - 66px);
  z-index: 12;
  background: url("./assets/bg.png") center center no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
}


</style>

